<template>
  <KView class="remind-page-detail">
    <page-header title="公告详情" @back-click="toBack"></page-header>
    <KView class="remind-page-detail-line"></KView>

    <KView class="remind-page-detail-content" v-if="notice">
      <KView class="remind-page-detail-item-time">{{$moment(notice.createTime).format('YYYY年MM月DD日 HH:mm')}}</KView>
      <KView class="remind-page-detail-item-title">{{notice.title}}</KView>
      <KView class="remind-page-detail-item-img" v-if="noticeImg!==''">
        <wx-rich-text v-if="isMiniprogram" :nodes="noticeImg" space="nbsp"></wx-rich-text>
        <div v-else v-html="noticeImg"></div>
      </KView>
      <KView class="remind-page-detail-item-data">
        <wx-rich-text v-if="isMiniprogram" :nodes="noticeHtml" space="nbsp"></wx-rich-text>
        <div v-else v-html="noticeHtml"></div>
      </KView>
    </KView>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';

  import PageHeader from 'common/pageHeader';

  import HomePageApi from 'services/homePageApi';

  export default {
    computed: {
      noticeImg() {
        let notice = this.notice;
        if (notice === null) {
          return '';
        }

        let imgUrl = notice.imgUrl;
        if (imgUrl === '') {
          return '';
        }

        return `<img class="remind-detail-img" src="${imgUrl}">`;
      },

      noticeHtml() {
        let notice = this.notice;
        if (notice === null) {
          return '';
        }

        let content = notice.content;
        content = content.replace(/\n/g, '<br>').replace(/ /g, '&nbsp;');
        return `<div class="notice-item-html">${content}</div>`;
      }
    },

    data() {
      let id = this.$route.params.id;
      return {
        id,
        notice: null,
        isMiniprogram: process.env.isMiniprogram
      };
    },

    created() {
      if (SystemUtil.isEmpty(this.id)) {
        this.toBack();
        return;
      }

      SystemUtil.showLoading();
      this.setNotice().then(() => {
        SystemUtil.hideLoading();
      }).catch(() => {
        SystemUtil.hideLoading();
      });
    },

    methods: {
      setNotice() {
        return HomePageApi.getNoticeById(this.id).then(notice => {
          this.notice = notice;
          return notice;
        });
      },

      toBack() {
        if (!this.isMiniprogram) {
          window.history.back();
          return;
        }
        wx.navigateBack();
      }
    },

    components: {
      PageHeader
    }
  };

</script>

<style lang="scss">
  .remind-page-detail {
    height: 100%;

    .page-header {
      margin-bottom: formatPx(20);
    }

    .remind-page-detail-line {
      height: 1px;
      background: #DADADA;
    }

    .remind-page-detail-content {
      margin-top: formatPx(40);
      height: calc(100% - #{formatPx(135)});
      padding: 0 formatPx(30);
      overflow: auto;

      .remind-page-detail-item-time {
        width: formatPx(300);
        height: formatPx(40);
        border-radius: 6px;
        background: #59c264;
        color: #ffffff;
        line-height: formatPx(40);
        font-size: formatPx(24);
        text-align: center;
        margin: auto;
      }

      .remind-page-detail-item-title {
        margin-top: formatPx(26);
        font-size: formatPx(32);
        text-align: center;
      }

      .remind-page-detail-item-img {
        margin-top: formatPx(26);

        .remind-detail-img {
          max-width: 100%;
          display: block;
          margin: auto;
        }
      }

      .remind-page-detail-item-data {
        margin-top: formatPx(26);

        .notice-item-html {
          line-height: 1.5;
          font-size: formatPx(26);
        }
      }
    }
  }

</style>
